<template>
  <div>
    <van-nav-bar
      title="生活缴费·西安市"
      left-text=""
      right-text="···"
      left-arrow
      @click-left="fun()"
    />
    <div class="wode">我的缴费</div>
    <van-empty description="暂无缴费信息" />
    <div class="kong"></div>
    <div class="wode">常用缴费</div>
    <van-grid>
      <van-grid-item v-for="(v, i) in newjiaofei" :key="i">
        <van-icon :name="v.name" :color="v.color" size="28" />
        <span class="custom-title">{{ v.title }}</span>
      </van-grid-item>
    </van-grid>
    <p>点击查看更多功能 ></p>
    <div class="kong"></div>
    <div>
      <img src="../../../../public/lifeimg/jf.png" alt="" class="bigtu" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wodejiao: [],
    };
  },
  methods: {
    fun() {
      this.$router.push("/life");
    },
  },
  mounted() {
    // 页面加载完毕发送请求
    // 调用vuex的actions触发异步操作
    this.$store.dispatch("JAOFEI_DATA", { url: "user/life7/datamock" });
  },
  computed: {
    newjiaofei() {
      return this.$store.state.life.wodejiaofei.wodejiao;
    },
  },
};
</script>

<style lang="less" scoped>
.wode {
  width: 90%;
  height: 0.16rem;
  line-height: 0.16rem;
  margin: 0.125rem auto;
  font-size: 0.15rem;
  padding-left: 0.125rem;
  font-weight: bold;
  border-left: 0.0467rem solid #0053a7;
}
.kong {
  width: 100%;
  height: 0.07rem;
  background-color: #efefef;
}
.van-icon {
  margin: auto;
}
.custom-title {
  font-size: 0.05rem;
}
p {
  width: 100%;
  height: 0.26rem;
  line-height: 0.26rem;
  text-align: center;
  font-size: 0.05rem;
  margin: 0.1125rem 0;
  color: #0c5190;
}
</style>